<template>
	<view class="shop_goods">
		<view class="swiper_wp">
			<swiper class="s_swiper" :circular="true" :autoplay="true" :interval="5000" @change="swiperChange" v-if="info.thumb.length>0">
				<swiper-item class="s_swiper_item" v-for="(item,index) in info.thumb" :key="index" @click="prevImage(current)">
					<image class="s_swiper_image" :src="item" />
				</swiper-item>
			</swiper>
			<view class="indicator" v-if="info.thumb!=''">
				<view v-for="(item,index) in info.thumb" :class="{'in_active':(index+1)==current}"></view>
			</view>
			<text @click="collectTap" :class="{collect_active:collecttext=='已收藏'}" class="iconfont icon-shoucang"></text>
		</view>
		<view class="w_content" :class="{'w_content_top':info.thumb.length>0,'w_content_top2':info.uid==1305}">
			<view class="shop_nav">
				<image :src="info.logo" mode=""></image>
				<view class="shop_info">
					<view class="info_title">
						<text class="icon" v-if="info.ispig==1">清 真</text>
						<text class="title">{{info.supname}}</text>
					</view>
					<view class="price">
						<!-- <view class="grade">
							<text class="label">VIP</text>
							<text v-if="info.vipdiscount!=10.00">{{info.vipdiscount}}折</text>
							<text v-else>无折扣</text>
						</view> -->
						<!-- <view class="grade grade1" v-if="(info.vipdiscount!=10.00&&info.vipdiscount!=0)||(info.discount!=10.00&&info.discount!=0)">
							<text class="label" >到店买单</text>
							<view class="vip_zhekou" v-if="info.vipdiscount!=10.00&&info.vipdiscount!=0.00">
								<image src="/static/vipsss.png"></image>
								<view>{{info.vipdiscount}}<text>折</text></view>
							</view>
							<text class="zhekou" v-if="info.discount!=10.00">{{info.discount}}<text>折</text></text> -->
							<!-- <text class="label" v-if="info.discount!=10.00">用户买单</text>
							<text class="zhekou" v-if="info.discount!=10.00">{{info.discount}}折</text>
							<text v-else>无折扣</text> -->
						<!-- </view> -->
						<!-- <view class="jie_sheng">
							<text>近期{{info.orderNum}}人节省</text>
							<text class="zi">{{info.reduce}}元</text>
						</view> -->
						<view class="jie_sheng">
							<text>￥{{info.avgsale}}/人</text>
						</view>
						<view class="grade">
							<text class="zhekou">最高补贴{{info.btrate}}%</text>
						</view>
					</view>
				</view>
			</view>
			<view class="notice_bar" v-if="info.content!=''">
				<image src="/static/bar.png" mode="widthFix"></image>
				<view class="no_bar">
					<uni-notice-bar :speed="14" scrollable :text="info.content" backgroundColor="#fff" :showStyle="true" color="#333" />
				</view>
			</view>
			<view class="discount" v-if="discount.discount.length>0">
				<text class="gray">商家提示</text>
				<text v-for="(item,index) in discount.discount" :key="index">{{item}}</text>
			</view>
			<suspension :videoUrl="info.vodurl" :isMask="true" :masktit="'门店视频'"></suspension>
			<view class="shop_time">
				<view class="s_left"><view class="s_tit">营业时间：</view>{{info.saletime}}</view>
				<image src="/static/dianhua.png" mode="widthFix" @click="phoneCall(info.mobile)"></image>
			</view>
			<view class="s_address" @click="openMap(info)">
				<view class="a_left">
					<view class="a_add">{{info.address}} ></view>
					<view class="a_length">
						<image src="/static/length.png" mode="widthFix"></image>
						<view>距离您{{info.length}}</view>
					</view>
				</view>
				<image src="/static/addre.png" mode="widthFix"></image>
			</view>
			<!-- 		<view class="notes">
				<view class="title"> <text>付款说明</text> </view>
				<jyf-parser class="content" :html="discount.payinfo"></jyf-parser>
			</view> -->
		</view>
		<!-- 菜单组件 -->
		<view class="">
			<menu-list ref="menus" @openShare="openShare" :discount="discount" :uid="info.uid" :merchInfo="info" :phoneNumberOld="phoneMember"></menu-list>
		</view>
		<!-- <view class="s_button"> -->
		<view class="s_button" v-if="info.uid!=1305">
			<!-- <view class="s_share" v-if="info.shareprice!=''">
				<image src="../../static/share.png" mode=""></image>
				<view>分享</view>
				<button class="s_share_b" open-type="share" type="default"></button>
			</view> -->
			<view class="s_share" @click="openShare">
				分享店铺
				<!-- <view class="s_s_tit">(赚{{info.shareprice}}%)</view> -->
			</view>
			<view class="s_pay" @click="discountOrder" v-if="info.openpay==1">线下付款</view>
		</view>
		<uni-popup ref="sharePopup" background-color="#fff" type="bottom" border-radius="10px 10px 0 0">
			<view class="flex_around share_type">
				<button class="share_type_it" open-type="share" type="default">
					<image src="/static/pengyouquan.png"></image>
					<view class="s_type_btn">分享给朋友</view>
				</button>
				<view class="share_type_it" @click="getShareImage">
					<image src="/static/sharepic.png"></image>
					<view class="s_type_btn">分享海报</view>
				</view>
			</view>
		</uni-popup>
		<!-- 授权 -->
		<uni-popup ref="popup" :is-mask-click="false">
			<view class=""
				style="text-align: center;background-color: #fff;border-radius: 20upx;padding: 30upx;line-height: 70upx;">
				<view class="" style="padding-bottom: 30upx;font-size: 32upx;">
					一键注册，立减现金
				</view>
				<button style="font-size: 28upx;" open-type="getPhoneNumber"
					@getphonenumber="getUserProfile">去授权</button>
			</view>
		</uni-popup>
		
		<!-- <preview-image v-show="isPrevImage" :isPrevImage.sync="isPrevImage" :imageList="[]"></preview-image> -->
		<view class="sharebg" v-if="shareImage!==''" @click="closeShareBg">
			<!-- #ifdef APP-PLUS||MP-WEIXIN -->
			<image @longpress="toSave" :src="shareImage" mode="widthFix"></image>
			<!-- #endif -->
		</view>
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" before-close="true" :value="mid" mode="input" title="推荐人ID" placeholder="请输入推荐人ID" @confirm="dialogInputConfirm" @close="closeDialog"></uni-popup-dialog>
		</uni-popup>
		<view class="gomask" v-if="isMask">
			<view class="maskTit">
				<view>点击下方，前往小程序</view>
				<image src="/static/zhixiang.png" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import Base64 from 'base-64';
	import PreviewImage from "./components/preview-image.vue"
	// 引入菜单组件
	import MenuList from "@/components/menu-list.vue"
	import suspension from "@/components/suspension.vue"
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState(['Location'])
		},
		components: {
			PreviewImage,
			MenuList,suspension
		},
		data() {
			return {
				info: {
					address: "",
					avgsale: "",
					content: "",
					discount: "",
					industryid: "",
					introduce: "",
					isfavorite: false,
					ispig: "0",
					length: "",
					logo: "",
					mobile: "",
					orderNum: "0",
					reduce: null,
					saletime: "",
					supname: "",
					thumb: [],
					uid: "",
					vipdiscount: "",
					shareprice:'',
					x: "",
					y: "",
				},
				shareImage: '',
				collecttext: '收藏',
				current: 1,
				discount: {
					payinfo: '',
					discount: []
				},
				// isPrevImage: false, //自定义预览显示
				mid: 0,
				phoneMember: '',
				isMask: false,
				code: ''
			}
		},
		async onLoad(option) {
			let that = this;
			this.info.uid = option.id ? option.id : this.gup('id', decodeURIComponent(option.scene));
			this.mid=this.gup('mid', decodeURIComponent(option.scene));
			if(option.mid){
				this.mid = option.mid;
			}
			if(option.code) this.code = option.code;
			if(!uni.getStorageSync('token')){
				this.getToken();
			}else{
				this.getInfo();
				this.getDiscount();
				this.getMobile();
			}
			this.getLocation();
			if(uni.getLaunchOptionsSync().scene == 1154){
				this.isMask = true;
			}else{
				this.isMask = false;
			}
			await this.$onLaunched;
		},
		onPageScroll(e){
			uni.$emit('onPageScroll', e.scrollTop);//传递参数
		},
		onReachBottom(){
			uni.$emit('getEva');
		},
		methods: {
			closeShareBg(){
				this.shareImage='';
			},
			getLocation(){
				let that = this;
				uni.getLocation({
					type: 'gcj02',
					success() {
						uni.onLocationChange(function(res) {
							console.log('成功',res)
							that.$store.commit('upLocation', {
								x: res.longitude,
								y: res.latitude
							})
							uni.setStorageSync('x',res.longitude);
							uni.setStorageSync('y',res.latitude);
							// that.getInfo();
							that.$isResolve();
						});
					},
					fail(err) {
						uni.startLocationUpdate({
							success: res => {
								uni.onLocationChange(function(res) {
									console.log('失败',res)
									that.$store.commit('upLocation', {
										x: res.longitude,
										y: res.latitude
									})
									uni.setStorageSync('x',res.longitude);
									uni.setStorageSync('y',res.latitude);
									// that.getInfo();
									that.$isResolve();
								});
							},
							fail: err => {
								that.$isResolve();
							}
						});
					}
				});
			},
			getToken(){
				/*#ifdef H5*/
				this.$axios('login/autoGzlogin','POST','member',{
					mid: this.mid,
					code: this.code,
				}).then(res=>{
					if(res.data.code == 300001){
						this.$navTo(res.data.data);
					}else if(res.data.code == 200){
						uni.setStorageSync('token', res.data.data);
						uni.setStorageSync('Jh_recotabshops', 1);
						this.getInfo();
						this.getDiscount();
						this.getSharePath();
						this.getMobile();
					}
				})
				/*#endif*/
				/*#ifndef H5*/
				uni.login({
					provider: 'weixin',
					success:res=> {
						this.$axios('login/autologin','POST','member',{
							mid: this.mid,
							code: res.code
						}).then(res=>{
							if(res.data.code == 200){
								uni.setStorageSync('token', res.data.data);
								uni.setStorageSync('Jh_recotabshops', 1);
								this.getInfo();
								this.getDiscount();
								this.getSharePath();
								this.getMobile();
							}
						})
					}
				})
				/*#endif*/
			},
			getUserProfile(e) {
				let that = this;
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						let obj = e.detail;
						obj.code1 = loginRes.code;
						obj.mid = that.mid;
						that.$axios('login/xcxlogin', "POST", 'member', obj).then(
							res => {
								if (res.data.code == 200) {
									uni.setStorageSync('token', res.data.data);
									that.getInfo();
									that.getDiscount();
									//console.log(that.$refs.menuList);
									that.$refs.menus.getshopMenu();
									that.$refs.menus.getList();
									that.$refs.popup.close();
								}else if(res.data.code==40001){
									that.$refs.inputDialog.open();
								}
							})
					},
					fail() {
						that.$api.msg('登录失败，请重试！')
					}
				})
			},
			dialogInputConfirm(value){
				let that = this;
				if(!value) return that.$api.msg('请输入推荐人ID');
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						that.$axios('login/bindmid','POST','member',{
							code: loginRes.code,
							agentid: value
						}).then(res=>{
							if(res.data.code == 200){
								uni.setStorageSync('token', res.data.data);
								that.getInfo();
								that.getDiscount();
								//console.log(that.$refs.menuList);
								that.$refs.menus.getshopMenu();
								that.$refs.menus.getList();
								that.$refs.popup.close();
								that.$refs.inputDialog.close();
							}
						})
					},
					fail() {
						that.$api.msg('登录失败，请重试！')
					}
				})
			},
			closeDialog(){
				this.$refs.inputDialog.close();
			},
			openShare(){
				this.$refs.sharePopup.open();
			},
			sharePYQ(){
				console.log(this.sharequery)
				uni.share({
					provider: "wx",
					scene: "WXSceneTimeline",
					type: 1,
					title: this.sharePubtitle,
					href: this.sharepath,
					// path: this.path,
					query: this.sharequery,
					imageUrl: this.shareimageUrl,
					success: function (res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function (err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			getShareImage() {
				if (!uni.getStorageSync('token')) {
					this.$refs.popup.open();
					return;
				}
				uni.showLoading({
					title: '海报生成中',
					mask: true
				});
				this.$axios('sharepic/create_poster', 'POST', 'supplier', {
					uid: this.info.uid
				}).then(res => {
					if (res.data.code == 200) {
						this.shareImage = res.data.data.url;
					}
					uni.hideLoading();
				})
			},
			toSave() {
				var that = this;
				uni.showModal({
					title: '图片保存',
					content: '确定要保存图片吗',
					success: e => {
						if (e['confirm']) {
							uni.downloadFile({
								url: that.shareImage,
								success: function(url) {
									uni.saveImageToPhotosAlbum({
										filePath: url.tempFilePath,
										success: function(e) {
											uni.showToast({
												title: '图片保存成功',
												icon: 'none',
												duration: 2200
											});
										},
									});
								},
								fail(e) {
									console.log(e)
								}
							});
						}
					}
				});
			},
			discountOrder() {
				if (!uni.getStorageSync('token')) {
					this.$refs.popup.open();
					return;
				}
				this.$axios('supplierGoods/payCode', 'POST', 'shop', {
					supplier_uid: this.info.uid
				}).then(res => {
					if (res.data.code == 200) {
						this.$navTo(res.data.data);
					}
				})
			},
			// 获取手机号
			getMobile(){
				var that = this;
				that.$axios('Info/member_info', "POST", 'member').then(res => {
					if (res.data.code = 200) {
						that.phoneMember = res.data.data.member.mobile;
					}
				})
			},
			getDiscount() {
				this.$axios('supplierGoods/discountDesc', 'POST', 'shop', {
					uid: this.info.uid
				}).then(res => {
					if (res.data.code == 200) {
						this.discount = res.data.data;
					}
				})
			},
			getInfo() {
				let obj = {
					...this.Location,
					...{
						supplier_uid: this.info.uid
					}
				}
				this.$axios('supplierGoods/main', 'POST', 'shop', obj).then(res => {
					if (res.data.code == 200) {
						this.info = res.data.data;
						if (this.info.isfavorite) {
							this.collecttext = '已收藏';
						} else {
							this.collecttext = '收藏';
						}
					}
				})
			},
			swiperChange(e) {
				var that = this;
				that.current = e.detail.current + 1;
			},
			phoneCall(v) {
				uni.makePhoneCall({
					phoneNumber: v
				})
			},
			openMap(v) {
				let that = this;
				uni.openLocation({
					latitude: parseFloat(v.y),
					longitude: parseFloat(v.x),
					scale: 15,
					name: v.supname,
					address: v.address,
				});
			},
			collectTap() {
				this.$axios('favorite/set', 'POST', 'shop', {
					id: this.info.uid,	
					type: 1
				}).then(res => {
					if (res.data.code == 200) {
						if (res.data.data.isfavorite) {
							this.collecttext = '已收藏';
						} else {
							this.collecttext = '收藏';
						}
					}
				})
			},
			
			prevImage(v) {
				uni.previewImage({
					current: v - 1,
					urls: this.info.thumb
				})
			},
		}
	}
</script>

<style lang="scss">
	@import "/store/icon.css";

	page {
		background-color: #f8f8f8;
		padding-bottom: 210rpx;
		color: #333;
	}
	.swiper_wp {
		position: relative;
		.s_swiper,
		.s_swiper_image {
			height: 500rpx;
			width: 100%;
			position: relative;
		}
		.s_swiper_item {
			position: relative;
	
			.describe {
				background: rgba(0, 0, 0, 0.4);
				border-radius: 10upx;
				color: #fff;
				font-size: 24upx;
				padding: 4upx 20upx;
				position: absolute;
				left: 50%;
				bottom: 20upx;
				transform: translateX(-50%);
				z-index: 100;
			}
			video{
				width: 100%;
				height: 300upx;
			}
		}
	
		.indicator {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 60rpx;
			display: flex;
			margin: auto;
			justify-content: center;
			view{
				width: 36rpx;
				height: 4rpx;
				background: #fff;
				opacity: 0.5;
				border-radius: 2rpx;
				margin: 0 6rpx;
			}
			.in_active{
				background: #fff;
				opacity: 1;
			}
		}
	}
	.notice_bar {
		position: relative;
		border-radius: 12rpx;
		overflow: hidden;
		height: 80rpx;
		line-height: 80rpx;
		background: #fff;
		image{
			width: 24rpx;
			position: absolute;
			left: 20rpx;
			top: 24rpx;
		}
		.no_bar{
			width: calc(100% - 40rpx);
			float: right;
		}
	}
	.w_content{
		padding: 0 20rpx;
		background: #f8f8f8;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		position: relative;
	}
	.w_content_top{
		margin-top: -38rpx;
	}
	.w_content_top2{
		margin-top: -210rpx;
	}
	.shop_nav {
		display: flex;
		padding: 30rpx 0;
		.price,
		.grade,
		.addre {
			display: flex;
			align-items: center;

			.grade {
				color: #8405dc;
				font-size: 24upx;

				.label {
					background: #000;
					border-radius: 8upx;
					color: #f3dd91;
					padding: 2upx 16rpx;
				}

				text {
					padding: 0 10upx;
				}
			}

			.grade1 {
				.label {
					height: 34rpx;
					background: linear-gradient( 270deg, #8816E1 0%, #B92DF1 100%);
					border-radius: 8rpx;
					font-size: 20rpx;
					color: #FFFFFF;
					line-height: 34rpx;
					text-align: center;
				}
				.vip_zhekou{
					position: relative;
					margin: 0 12rpx;
					image{
						position: absolute;
						left: 0;
						top: 0;
						width: 128rpx;
						height: 34rpx;
					}
					view{
						color: #FFF4CD;
						font-weight: 600;
						position: relative;
						padding-left: 46rpx;
						line-height: 34rpx;
						text{
							font-size: 20rpx;
							font-weight: 400;
							padding: 0;
						}
					}
				}
			}
			.zhekou {
				font-weight: bold;
				text{
					font-size: 20rpx;
					font-weight: 400;
					padding: 0;
				}
			}
			.jie_sheng {
				// border-left: 1px #666 solid;
				// color: $bg-color;
				flex: 1;
				justify-content: flex-end;
				font-size: 24upx;
				margin-left: 10rpx;
				// padding: 0 20upx;
				color: #333333;
				.zi {
					color: #8405dc;
				}
			}
		}

	}

	.shop_nav image {
		border-radius: 108rpx;
		height: 108rpx;
		width: 108rpx;
	}

	.shop_info {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		flex: 1;
		padding: 0 20upx;
	}

	.info_title {
		display: flex;
		align-items: center;
		font-weight: bold;
		width: 100%;
		.icon {
			border-radius: 7rpx;
			background: #02883d;
			color: #fff;
			font-size: 22upx;
			line-height: 35upx;
			padding: 0 6upx;
			margin-right: 5upx;
		}

		.title {
			flex: 1;
			font-size: 36rpx;
			font-weight: 600;
		}
	}

	.icon-shoucang {
		border-radius: 20upx;
		color: #fff;
		font-size: 28upx;
		font-weight: bold;
		padding: 2upx 12upx;
		position: absolute;
		right: 20rpx;
		top: 20rpx;
		width: 52rpx;
		background: rgba(0, 0, 0, 0.6);
		height: 52rpx;
		border-radius: 50%;
		line-height: 50rpx;
	}

	.collect_active {
		color: $base-color;
		background: rgba(255,255,255,.6);
	}
	.discount {
		border-bottom: 1rpx #DEDEDE solid;
		display: flex;
		align-items: center;
		padding: 20upx 0;
		flex-wrap: wrap;
		text {
			border: 2rpx solid #E97D7D;
			border-radius: 8upx;
			color: red;
			font-size: 22rpx;
			margin-right: 20rpx;
			padding: 2rpx 10rpx;
		}
	
		text:nth-of-type(1) {
			border: none;
			color: #333;
			font-size: 28rpx;
			font-weight: bold;
			padding: 0;
		}
	}

	.shop_time{
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx #DEDEDE solid;
		padding: 20rpx 0;
		align-items: center;
		font-size: 26rpx;
		.s_left{
			display: flex;
			align-items: center;
			.s_tit{
				color: #A222E9;
				font-weight: 600;
			}
		}
		image{
			width: 46rpx;
		}
	}
	.s_address {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 26rpx;
		padding: 20rpx 0;
		.a_left{
			flex: 1;
			padding-right: 30rpx;
			.a_add{
				font-weight: 600;
			}
			.a_length{
				margin-top: 10rpx;
				display: flex;
				align-items: center;
				font-size: 22rpx;
				color: #999999;
				image{
					width: 16rpx;
					margin-right: 10rpx;
				}
			}
		}
		image{
			width: 46rpx;
		}
	}

	.notes {
		.title {

			text-align: center;

			text {
				color: #000;
				display: inline-block;
				border-bottom: 1px red solid;
				font-weight: bold;
				line-height: 60upx;
			}
		}

		.content {
			color: #666;
			font-size: 24upx;
			line-height: 40upx;
			padding: 10upx 20upx;
		}
	}


	.s_title {
		color: #000000;
		font-size: 30upx;
		font-weight: bold;
		margin-bottom: 20upx;
		position: relative;
		text-align: center;
	}

	.s_title::after {
		border-bottom: 2px $base-color solid;
		content: '';
		position: absolute;
		bottom: -2upx;
		left: 50%;
		transform: translateX(-50%);
		width: 110upx;
	}

	.s_ev_empty {
		background-color: #FFFFFF;
		padding: 40upx;
		text-align: center;
	}

	.s_ev_list {
		background-color: #FFFFFF;
		padding: 20upx;
	}

	.ev_tiem_title {
		display: flex;
	}

	.ev_tiem_thumber {
		border-radius: 8upx;
		height: 60upx;
		width: 60upx;
	}

	.ev_nickname_time {
		display: flex;
		justify-content: space-between;
		font-size: 24upx;
		font-weight: bold;
		flex: 1;
		padding-left: 15upx;
	}

	.ev_xing image {
		height: 20upx;
		width: 20upx;
		margin-right: 4upx;
	}

	.ev_time {
		color: $font-color-light;
		font-size: 22upx;
		font-weight: normal;
	}

	.ev_message {
		font-size: 26upx;
		padding: 15upx 20upx;
	}

	.ev_imgs image {
		border-radius: 5upx;
		margin-right: 15upx;
		height: 100upx;
		width: 100upx;
	}

	.ev_more {
		font-size: 22upx;
		text-align: right;
	}

	.s_goods_list {
		padding: 20upx 10upx;
	}

	.goods_item {
		background: #FFFFFF;
		border-radius: 10upx;
		display: inline-block;
		font-size: 26upx;
		margin-bottom: 20upx;
		padding-bottom: 20upx;
		width: calc(50% - 5upx);

	}

	.goods_item:nth-of-type(2n+1) {
		margin-right: 5upx;
	}

	.goods_item:nth-of-type(2n+2) {
		margin-left: 5upx;
	}

	.goods_item image {
		border-radius: 10upx;
		height: 360upx;
		width: 100%;
	}

	.goods_title,
	.goods_saleprice {
		font-weight: bold;
		padding: 0 20upx;
	}

	.goods_title {
		margin-top: 10upx;
		line-height: 35upx;
	}

	.item_productprice {
		color: #606266;
		font-size: 26upx;
		padding: 0 20upx;
		text-decoration: line-through;
	}

	.goods_saleprice {
		color: $base-color;
		font-size: 32upx;
	}

	.money::after {
		content: '元';
		font-size: 22upx;
	}

	.money1::before {
		content: '+';
		font-size: 22upx;
	}

	.money1::after {
		content: '米币';
		font-size: 22upx;
	}

	.money2 {
		color: $font-color-light;
		font-size: $font-sm;
		margin-left: 10upx;
		font-weight: normal;
	}


	.goods_productprice {
		color: $font-color-light;
		font-size: 24upx;
		padding: 0 20upx;
	}

	.s_button {
		height: 148rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20upx;
		position: fixed;
		width: 100%;
		bottom: 0;
		text-align: center;
		z-index: 99;
		padding-top: 20rpx;
		.s_share{
			width: 335rpx;
			line-height: 74rpx;
			background: #F0E1FF;
			border-radius: 38rpx;
			font-size: 28rpx;
			margin-right: 26rpx;
			.s_s_tit{
				color:#A222E9;
				font-size: 20rpx;
			}
		}
		
		.s_pay {
			width: 335rpx;
			height: 74rpx;
			background: linear-gradient( 270deg, #8917E2 0%, #B92DF1 100%);
			border-radius: 38rpx;
			line-height: 74rpx;
			color: #FFFFFF;
			text-align: center;
		}
	}
	.share_type{
		padding-top: 50rpx;
		.share_type_it{
			text-align: center;
			width: 50%;
			background: transparent;
			line-height: 1;
			&::after{
				border: 0rpx;
			}
			image{
				width: 110rpx;
				height: 110rpx;
			}
			.s_type_btn{
				font-size: 30rpx;
				line-height: 66rpx;
			}
		}
	}
	// .s_share {
	// 	display: flex;
	// 	font-size: 24upx;
	// 	flex-direction: column;
	// 	justify-content: center;
	// 	align-items: center;
	// }

	// .s_share image {
	// 	height: 40upx;
	// 	width: 60upx;
	// }

	// .s_share_b {
	// 	height: 100%;
	// 	position: absolute;
	// 	left: 0;
	// 	top: 0;
	// 	opacity: 0;
	// 	width: 100%;
	// 	z-index: 10;
	// }

	

	.loading_message {
		text-align: center;
		color: #0062CC;
	}

	.loading_message image {
		height: 60upx;
		width: 60upx;
	}

	.sharebg {
		position: fixed;
		z-index: 998;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.3);

		image {
			width: 80%;
			position: fixed;
			left: 50%;
			top: 50%;
			z-index: 999;
			transform: translate(-50%, -50%);
		}
	}
</style>